VACMS 20241 - autosuggest/typeahead/combobox address for facility locator #34361

eselkin · 2025-01-29T00:11:05Z

Are you removing, renaming or moving a folder in this PR?

No, I'm not changing any folders (skip to TeamSites and delete the rest of this section)
Yes, I'm removing, renaming or moving a folder

Did you change site-wide styles, platform utilities or other infrastructure?

No
Yes, and I used the proxy-rewrite steps to test the injected header scenario

Summary

Adds the Typeahead component inside the facility-locator application directory. For use in FL projects. Here it is used by the AddressTypeahead component to suggest correct city/zip/locations.
Sitewide team
flipper to be used is: facilities_use_address_typeahead

Related issue(s)

Update Facility locator city, state, zip field to autosuggest a valid address using Mapbox geocoding API va.gov-cms#20241

PR for flipper
department-of-veterans-affairs/vets-api#20516

Testing done

The address/city/state/zip field is just a text input, now when the flipper is enabled, it allows for the user to receive autosuggest options for the city/state, zip, address so they know they are picking the right city/town/zipcode/country

Screenshots

New Autosuggest for find-locations
https://github.com/user-attachments/assets/7ac0ad4f-1b21-4748-b2b9-256b8d5136de

What areas of the site does it impact?

Affects the zip code/city,state field of the Facility Locator

Acceptance criteria

Provides up to 5 mapbox found locations for a user input.

Quality Assurance & Testing

I fixed|updated|added unit tests and integration tests for each feature (if applicable).
No sensitive information (i.e. PII/credentials/internal URLs/etc.) is captured in logging, hardcoded, or specs
Linting warnings have been addressed
Documentation has been updated (link to documentation *if necessary)
Screenshot of the developed feature is added
Accessibility testing has been performed

Error Handling

Browser console contains no warnings or errors.
Events are being sent to the appropriate logging solution
Feature/bug has a monitor built into Datadog or Grafana (if applicable)

Authentication

Did you login to a local build and verify all authenticated routes work as expected with a test user

Requested Feedback

Check /find-locations

….com:department-of-veterans-affairs/vets-website into VACMS-20241-autosuggest-valid-address-mapbox

randimays

Some observations:

If I select an option from the dropdown, then go back and edit it, ignoring the dropdown options, the search term in the result string is not updated.

Screen.Recording.2025-02-05.at.9.45.39.AM.mov

If I've already selected an option from the dropdown, then I click "Use my location," nothing happens.

Screen.Recording.2025-02-05.at.9.51.24.AM.mov

Similarly, if I have an option from the dropdown, then clear that option and click "Use my location," nothing happens. I can see a geocoding call in the network tab happening, so perhaps it's having trouble replacing the input value?

Screen.Recording.2025-02-05.at.9.56.09.AM.mov

This is likely out-of-scope because it's also a thing in prod, but I'm curious: are we not wanting to enforce that people choose a city when searching? Noticing I can search for "Oklahoma" in both this local build and prod.

src/applications/facility-locator/components/AddressAutosuggest.jsx

randimays · 2025-02-05T16:33:21Z

src/applications/facility-locator/components/AddressInputError.jsx

+  return (
+    <span className="usa-input-error-message" role="alert">
+      <span className="sr-only">Error</span>
+      Please fill in a city, state, or postal code.


We stopped using Please in other apps per DS recommendations; should we be using it here?

It's being updated in the progressive disclosure ticket. We're also changing the string associated with it.

We can update here to be in line with that.

I think we need to update it here to be in line with DS standards (if we know what it should be).

src/applications/facility-locator/components/Autosuggest/AutosuggestOption.jsx

src/applications/facility-locator/components/Autosuggest/StateReducer.js

src/applications/facility-locator/components/Autosuggest/sass/autosuggest.scss

randimays · 2025-02-05T16:46:04Z

src/applications/facility-locator/utils/mapHelpers.js

+      proximity: 'ip',
+    })
+    .send();
+  // TODO: display error message if geolocation fails?


Does this still need to be handled before we can merge?

This is an old issue and possible a zero silent failures concern. I removed, but we probably need to handle. It's direct with mapbox that the issue may happen.

Is handling this in scope for this ticket? If not, could we spin up a new ticket for this and add the ticket # as part of this comment please?

src/applications/facility-locator/tests/components/AutosuggestTestComponent.jsx

src/applications/facility-locator/tests/components/Autosuggest.unit.spec.jsx

….com:department-of-veterans-affairs/vets-website into VACMS-20241-autosuggest-valid-address-mapbox

src/applications/facility-locator/components/Autosuggest/StateReducer.js

src/applications/facility-locator/components/AddressAutosuggest.jsx

eselkin · 2025-02-05T17:23:03Z

src/applications/facility-locator/components/AddressInputError.jsx

+  return (
+    <span className="usa-input-error-message" role="alert">
+      <span className="sr-only">Error</span>
+      Please fill in a city, state, or postal code.


It's being updated in the progressive disclosure ticket. We're also changing the string associated with it.

src/applications/facility-locator/components/Autosuggest/AutosuggestOption.jsx

eselkin · 2025-02-05T17:29:06Z

src/applications/facility-locator/components/AddressInputError.jsx

+  return (
+    <span className="usa-input-error-message" role="alert">
+      <span className="sr-only">Error</span>
+      Please fill in a city, state, or postal code.


We can update here to be in line with that.

src/applications/facility-locator/components/AddressAutosuggest.jsx

src/applications/facility-locator/components/Autosuggest/StateReducer.js

src/applications/facility-locator/components/Autosuggest/index.jsx

randimays · 2025-02-06T12:49:31Z

If the component allows a free-text response, should it be doing its "best guess" matching against responses that don't quite make sense? A couple of examples where I typed some junk and it searched for one of the suggestions that wasn't selected:

Screen.Recording.2025-02-06.at.6.44.19.AM.mov

Screen.Recording.2025-02-06.at.6.41.39.AM.mov

…arching will be the same as what is searched when typed

eselkin · 2025-02-06T17:01:53Z

So the reason we weren't getting the search terms in the AutosuggestOptions was because I was testing without country in that box but it was still searching country with the search button. Now they show the same thing, but both behaviors are what are seen in production. Mapbox doesn't understand misspelled Carolina even if the stuff before it make sense.

randimays · 2025-02-07T15:57:32Z

@eselkin Not sure I understand. I think the root of my question is: if you type something in the search box and do not select any of the dropdown options, shouldn't it search for exactly what you typed rather than trying to pick a suggestion?

eselkin · 2025-02-07T15:59:57Z

That is the effect. It is searching for what you typed. Unfortunately the search comes back with what mapbox says it thinks you meant.

randimays · 2025-02-07T20:25:00Z

I finished functional testing on my end - just a couple comments left in the diffs still.

It's hard to wrap my brain around whether this will work 100% for VA health services autosuggest at this stage; I think we'll find out when we get there.

….com:department-of-veterans-affairs/vets-website into VACMS-20241-autosuggest-valid-address-mapbox

eselkin and others added 9 commits January 22, 2025 13:32

initial

b3f0314

Merge branch 'main' into VACMS-20241-autosuggest-valid-address-mapbox

7b516e8

working with figma and autosuggest specific options

6b8db34

cleanup

3c853b1

merge

7ae7972

clean flipper

c1b5dab

fix conflict

3f4ca99

typos

d574ffa

put back focus in helper function

ae249d6

va-vfs-bot temporarily deployed to master/VACMS-20241-autosuggest-valid-address-mapbox/main January 29, 2025 02:05 Inactive

make AddressTypeahead work with errorMessages for either flipper state

5945aaf

va-vfs-bot temporarily deployed to master/VACMS-20241-autosuggest-valid-address-mapbox/main January 29, 2025 05:12 Inactive

eselkin added 3 commits January 29, 2025 14:49

loading when searching for address

05ee225

Merge branch 'main' into VACMS-20241-autosuggest-valid-address-mapbox

dd34b56

add newline

3af99c3

va-vfs-bot temporarily deployed to master/VACMS-20241-autosuggest-valid-address-mapbox/main January 30, 2025 00:07 Inactive

eselkin added 3 commits January 30, 2025 09:37

add tests

0d22f8d

cleanup

756953c

Merge branch 'main' into VACMS-20241-autosuggest-valid-address-mapbox

0a8ea22

va-vfs-bot temporarily deployed to master/VACMS-20241-autosuggest-valid-address-mapbox/main January 30, 2025 17:47 Inactive

fix alignment

804d501

va-vfs-bot temporarily deployed to master/VACMS-20241-autosuggest-valid-address-mapbox/main January 31, 2025 01:17 Inactive

simplify checks for errors

4380f3c

va-vfs-bot temporarily deployed to master/VACMS-20241-autosuggest-valid-address-mapbox/main January 31, 2025 04:38 Inactive

Merge branch 'main' into VACMS-20241-autosuggest-valid-address-mapbox

6c42a7d

va-vfs-bot temporarily deployed to master/VACMS-20241-autosuggest-valid-address-mapbox/main January 31, 2025 05:58 Inactive

eselkin added 3 commits January 31, 2025 10:24

autosuggest - cannot rename flipper

2a41ec9

Merge branch 'VACMS-20241-autosuggest-valid-address-mapbox' of github…

6f54195

….com:department-of-veterans-affairs/vets-website into VACMS-20241-autosuggest-valid-address-mapbox

Merge branch 'main' into VACMS-20241-autosuggest-valid-address-mapbox

642624d

va-vfs-bot had a problem deploying to master/VACMS-20241-autosuggest-valid-address-mapbox/main January 31, 2025 18:26 Error

eselkin added 3 commits February 4, 2025 09:46

Merge branch 'main' into VACMS-20241-autosuggest-valid-address-mapbox

c38edd2

Merge branch 'main' into VACMS-20241-autosuggest-valid-address-mapbox

679e3ff

Merge branch 'main' into VACMS-20241-autosuggest-valid-address-mapbox

3359518

va-vfs-bot had a problem deploying to master/VACMS-20241-autosuggest-valid-address-mapbox/main February 4, 2025 18:46 Error

Merge branch 'main' into VACMS-20241-autosuggest-valid-address-mapbox

877ad6a

va-vfs-bot temporarily deployed to master/VACMS-20241-autosuggest-valid-address-mapbox/main February 4, 2025 21:54 Inactive

randimays reviewed Feb 5, 2025

View reviewed changes

eselkin added 2 commits February 5, 2025 10:43

fix issues on Autosuggest - cities only?

ef87190

Merge branch 'VACMS-20241-autosuggest-valid-address-mapbox' of github…

c7cce5c

….com:department-of-veterans-affairs/vets-website into VACMS-20241-autosuggest-valid-address-mapbox

eselkin commented Feb 5, 2025

View reviewed changes

va-vfs-bot temporarily deployed to master/VACMS-20241-autosuggest-valid-address-mapbox/main February 5, 2025 18:45 Inactive

eselkin added 2 commits February 5, 2025 10:48

change name of value

676679e

line breaks

2b53dd8

va-vfs-bot temporarily deployed to master/VACMS-20241-autosuggest-valid-address-mapbox/main February 5, 2025 18:57 Inactive

eselkin requested a review from randimays February 5, 2025 21:29

randimays reviewed Feb 6, 2025

View reviewed changes

src/applications/facility-locator/components/Autosuggest/index.jsx Outdated Show resolved Hide resolved

returned the search to the correct parameters so the thing that is se…

93542bc

…arching will be the same as what is searched when typed

va-vfs-bot temporarily deployed to master/VACMS-20241-autosuggest-valid-address-mapbox/main February 6, 2025 17:01 Inactive

Merge branch 'main' into VACMS-20241-autosuggest-valid-address-mapbox

9222e7e

va-vfs-bot temporarily deployed to master/VACMS-20241-autosuggest-valid-address-mapbox/main February 11, 2025 22:35 Inactive

eselkin added 3 commits February 11, 2025 15:58

keep on blur also keep on escape

ce5e196

Merge branch 'VACMS-20241-autosuggest-valid-address-mapbox' of github…

b309c43

….com:department-of-veterans-affairs/vets-website into VACMS-20241-autosuggest-valid-address-mapbox

merge

1b34aa2

va-vfs-bot deployed to master/VACMS-20241-autosuggest-valid-address-mapbox/main February 12, 2025 00:35 View deployment

powellkerry approved these changes Feb 13, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

VACMS 20241 - autosuggest/typeahead/combobox address for facility locator #34361

VACMS 20241 - autosuggest/typeahead/combobox address for facility locator #34361

eselkin commented Jan 29, 2025 •

edited

Loading

randimays left a comment

randimays Feb 5, 2025

eselkin Feb 5, 2025

eselkin Feb 5, 2025

randimays Feb 5, 2025

randimays Feb 5, 2025

eselkin Feb 5, 2025

randimays Feb 5, 2025

eselkin Feb 5, 2025

eselkin Feb 5, 2025

randimays commented Feb 6, 2025

eselkin commented Feb 6, 2025

randimays commented Feb 7, 2025

eselkin commented Feb 7, 2025

randimays commented Feb 7, 2025

VACMS 20241 - autosuggest/typeahead/combobox address for facility locator #34361

Are you sure you want to change the base?

VACMS 20241 - autosuggest/typeahead/combobox address for facility locator #34361

Conversation

eselkin commented Jan 29, 2025 • edited Loading

Are you removing, renaming or moving a folder in this PR?

Summary

Related issue(s)

Testing done

Screenshots

What areas of the site does it impact?

Acceptance criteria

Quality Assurance & Testing

Error Handling

Authentication

Requested Feedback

randimays left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

randimays commented Feb 6, 2025

eselkin commented Feb 6, 2025

randimays commented Feb 7, 2025

eselkin commented Feb 7, 2025

randimays commented Feb 7, 2025

eselkin commented Jan 29, 2025 •

edited

Loading